const categorySelectHtml = '          <span class="size-M radius col-xs-8 f-l" style="width:20%">\n' +
    '                                    <div style="position: relative;">\n' +
    '                                        <input type="text" autocomplete="off" class="input-text radius category_inp" name="class1" placeholder="请选择一级品类" oninput="goods_listCategory(1, \'\', this.value, \'\', $(this).parents(\'.category_select_box\'))" onfocus="goods_listCategory(1, \'\', this.value, \'\', $(this).parents(\'.category_select_box\'))" id="class1">\n' +
    '                                        <ul class="relation radius guanlian classUl" id="classUl1"></ul>\n' +
    '                                    </div>\n' +
    '                                </span>\n' +
    '                                <span class="f-l pl-10 pr-10 pt-5">~</span>\n' +
    '                                <span class="size-M radius col-xs-8 f-l" style="width:20%">\n' +
    '                                    <div style="position: relative;">\n' +
    '                                        <input type="text" autocomplete="off" class="input-text radius category_inp" name="class2" placeholder="请选择二级品类" id="class2" oninput="goods_listCategory(2, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))" onfocus="goods_listCategory(2, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))">\n' +
    '                                        <ul class="relation radius guanlian classUl" id="classUl2"></ul>\n' +
    '                                    </div>\n' +
    '                                </span>\n' +
    '                                <span class="f-l pl-10 pr-10 pt-5">~</span>\n' +
    '                                <span class="size-M radius col-xs-8" style="width:20%">\n' +
    '                                    <div style="position: relative;">\n' +
    '                                        <input type="text" autocomplete="off" class="input-text radius category_inp" name="class3" placeholder="请选择三级品类" id="class3" oninput="goods_listCategory(3, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))" onfocus="goods_listCategory(3, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))">\n' +
    '                                        <ul class="relation radius guanlian classUl" id="classUl3"></ul>\n' +
    '                                    </div>\n' +
    '                                </span>\n' +
    '                                <span class="f-l pl-10 pr-10 pt-5">~</span>\n' +
    '                                <span class="size-M radius col-xs-8" style="width:20%">\n' +
    '                                    <div style="position: relative;">\n' +
    '                                        <input type="text" autocomplete="off" class="input-text radius category_inp" name="class4" placeholder="请选择四级品类" id="class4" oninput="goods_listCategory(4, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))" onfocus="goods_listCategory(4, $(this).attr(\'categoryId\'), this.value, \'\', $(this).parents(\'.category_select_box\'))">\n' +
    '                                        <ul class="relation radius guanlian classUl" id="classUl4"></ul>\n' +
    '                                    </div>\n' +
    '                                </span>';
for (let i = 0; i < $(".category_select_box").length; i++) {
    $($(".category_select_box")[i]).html(categorySelectHtml);
}
var _categoryData = {};
function getCategory(categoryLevel, categoryId, categoryName) {
    return new Promise((resolve, reject) => {
        let params = {}
        if(categoryLevel && categoryLevel != ""){
            params.categoryLevel = categoryLevel;
        }
        if(categoryId && categoryId != ""){
            params.parentCateId = categoryId;
            delete params.categoryLevel;
        }
        if(categoryName && categoryName != ""){
            params.categoryName = categoryName;
        }
        web.doAjax(root.goodsInter.categoryByParam, 'post', params, function (data) {
            if(data.errorCode != 0){
                reject(data);
            }
            resolve(data.data);
        },2);
    });
}
function clearData(level) {
    $("#class" + level).val("").attr("categoryId", "");
    $("#classUl" + level).html("");
    delete _categoryData["categoryId" + level];
    delete _categoryData["categoryName" + level];
}
function goods_listCategory(categoryLevel, categoryId, categoryName, selectName, parentEl) {
    if (categoryLevel > 1 && !categoryId){
        return;
    }
    let nextCategoryLevel = Number(categoryLevel) + 1;//下一级
    let lastCategoryLevel = Number(categoryLevel) - 1;//上一级
    /*点击获取下一级调用后，2,3,4级操作*/
    if((!categoryName || categoryName=="") && categoryLevel == 1){
        clearData(1);
        clearData(2);
        clearData(3);
        clearData(4);
        if(selectName){
            _categoryData.categoryId1 = categoryId;
            _categoryData.categoryName1 = selectName;
        }
    }
    if((!categoryName || categoryName=="") && categoryLevel == 2){
        clearData(2);
        clearData(3);
        clearData(4);
        if(selectName){
            _categoryData.categoryId1 = categoryId;
            _categoryData.categoryName1 = selectName;
        }
    }
    if((!categoryName || categoryName=="") && categoryLevel == 3){
        clearData(3);
        clearData(4);
        if(selectName){
            _categoryData.categoryId2 = categoryId;
            _categoryData.categoryName2 = selectName;
        }
        console.log(_categoryData);
    }
    if((!categoryName || categoryName=="") && categoryLevel == 4){
        clearData(4);
        if(selectName){
            _categoryData.categoryId3 = categoryId;
            _categoryData.categoryName3 = selectName;
        }
        console.log(_categoryData);
    }
    if((!categoryName || categoryName=="") && categoryLevel == 5){
        if(selectName){
            _categoryData.categoryId4 = categoryId;
            _categoryData.categoryName4 = selectName;
        }
    }
    getCategory(categoryLevel, categoryId, categoryName).then((result) => {
        // _categoryData["categoryId" + lastCategoryLevel] = categoryId;
        // _categoryData["categoryName" + lastCategoryLevel] = selectName;
        let categoryLi = '';
        console.log(categoryLevel)
        if(result.length == 0){
            categoryLi = "<li>无数据</li>";
            _categoryData["category" + categoryLevel + "NotData"] = true;
        }else {
            result.forEach((item) => {
                categoryLi += "<li onclick='goods_listCategory(" + nextCategoryLevel + ", " + item.category_id + ", \"\", \"" + item.category_name + "\", $(this).parents(\".category_select_box\"))'>" + item.category_name + "</li>"
            });
        }
        $(parentEl).find(".classUl").hide();
        $(parentEl).find("#classUl" + categoryLevel).html(categoryLi).show();
        /*击触发的函数，存在selectName时为点，需要赋值给上一级input*/
        if(selectName){
            $(parentEl).find("#class" + lastCategoryLevel).val(selectName);
        }
        /*给当前级的input赋值属性*/
        if(categoryId){
            $(parentEl).find("#class" + categoryLevel).attr({
                categoryLevel: categoryLevel,
                categoryId: categoryId
            })
        }
    });
}
$(document).bind("click", function (e) {
    //id为menu的是菜单，id为open的是打开菜单的按钮
    if ($(e.target).closest(".classUl").length == 0 && $(e.target).closest(".category_inp").length == 0) {
        //点击id为menu之外且id不是不是open，则触发
        $(".classUl").hide()
    }
});
